<!DOCTYPE html>
<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">

<head>
    {{- partial "head.html" . -}}
</head>

<body>
    {{ if .Site.Params.addGoogleTag }}
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W9FLX4R" height="0" width="0"
            style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    {{ end }}
    {{- partial "header.html" . -}}
    <main class='main-section padding'>
        <section class='section-1 bg-cover'>
            <div class="common-layout">
                {{ partial "breadcrumb.html" . }}

                <div class="title-div">
                    {{ $sections := .FirstSection.Sections.ByWeight }}
                    {{ $secondSection := .FirstSection }}
                    {{ $page := . }}
                    {{ range $sections }}
                    {{ if $page.IsDescendant . }}
                    {{ $secondSection = . }}
                    {{ end }}
                    {{ end }}
                    <p><a href="{{ $secondSection.RelPermalink }}">{{ $secondSection.LinkTitle }}</a></p>
                    <div class="menu section-control">
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>

                <div class="search-div">
                    {{ partial "searchInput" . }}
                </div>
            </div>
        </section>

        <section class="section-menu">
            {{ with (.GetPage "/docs") }}
            <div class="common-layout">
                {{ partial "section" . }}
            </div>
            {{ end }}
        </section>

        <section class="section-2">
            <div class="common-layout">
                <div class="left-div left-tree">
                    <div class="inner-tree">
                        {{ partial "tree.html" . }}
                        <!-- <div class="download-div">
                        <span class="download-icon"></span>
                        <span>{{ i18n "Download this page (PDF)" }}</span>
                    </div> -->
                    </div>
                </div>
                <div class="second-section-menu">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div class="middle-div">
                    <div class="top-div common-flex-layout">
                        <div class="contributor-div">
                            <span>{{ i18n "Last updated" }}:</span>
                            <span class="update-time"></span>
                            <a href="{{ .Site.Params.githubBlobUrl }}/{{ .Site.Language.Lang }}/{{ .File.Path }}"
                                target="_blank" rel="noopener noreferrer">
                                <ul class="contributor-avatar"></ul>
                            </a>
                            <span class="more-contributor"></span>
                        </div>
                        <div class="mutual-div common-flex-layout">
                            <div class="edit-div">
                                <a href="{{ .Site.Params.githubEditUrl }}/{{ .Site.Language.Lang }}/{{ .File.Path }}"
                                    target="_blank" rel="noopener noreferrer">
                                    <span class="icon-span"></span>
                                    <span>{{ i18n "edit" }}</span>
                                </a>
                            </div>
                            <div class="feedback-div">
                                <a href="{{ .Site.Params.githubUrl }}/issues/new" target="_blank"
                                    rel="noopener noreferrer">
                                    <span class="icon-span"></span>
                                    <span>{{ i18n "feedback" }}</span>
                                </a>
                            </div>
                            <div class="share-div">
                                <div>
                                    <span class="icon-span"></span>
                                    <span>{{ i18n "share" }}</span>
                                </div>
                                <ul>
                                    <li>
                                        <img src="/images/docs/v3.3/twitter.svg" alt="twitter">
                                        <a href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}"
                                            target="_blank" rel="noopener noreferrer">twitter</a>
                                    </li>
                                    <li>
                                        <img src="/images/docs/v3.3/linkedIn.svg" alt="linkedIn">
                                        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}"
                                            target="_blank" rel="noopener noreferrer">linkedIn</a>
                                    </li>
                                    <li>
                                        <img src="/images/docs/v3.3/facebook.svg" alt="facebook">
                                        <a href="https://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank"
                                            rel="noopener noreferrer">facebook</a>
                                    </li>
                                    <li>
                                        <img src="/images/docs/v3.3/reddit.svg" alt="reddit">
                                        <a href="https://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}"
                                            target="_blank" rel="noopener noreferrer">reddit</a>
                                    </li>
                                    <li>
                                        <img src="/images/docs/v3.3/email.svg" alt="email">
                                        <a href="mailto:info@kubesphere.io" target="_blank"
                                            rel="noopener noreferrer">email</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="content-div main-div">
                        <div class="md-body">
                            <h1>{{ .Title }}</h1>
                            {{ .Content }}
                            <section class="feedback-section">
                                <p class="title">{{ i18n "feedback"}}</p>
                                <p>{{i18n "Was this page Helpful?"}}</p>
                                <button class="Yes">{{ i18n "Yes" }}</button>
                                <button class="No">{{ i18n "No" }}</button>
                            </section>

                            <div class="SubscribeForm">
                                <div class="innerBox">
                                    <p class="description">
                                        {{ i18n "Receive the latest news, articles and updates from KubeSphere" }}
                                    </p>
                                    {{ partial "subscribe.html" .}}
                                </div>
                            </div>
                            
                            <br>
                            <p class="msg-thank">{{ i18n "Msg-Thank" }}</p>
                        </div>
                    </div>
                    {{ if .IsPage }}

                    <div class="page-div common-flex-layout">
                        {{ with .Next }}
                        <!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
                        <a class="last" href="{{.RelPermalink}}">
                            <img src="/images/docs/v3.3/last.svg" alt="{{ i18n " Previous" }}">
                            {{ i18n "Previous" }}
                            <span>: {{.LinkTitle}}</span>
                        </a>
                        <!-- {{ end }} -->
                        {{ end }}
                        {{ with .Prev }}
                        <!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
                        <a class="next" href="{{.RelPermalink}}">
                            {{ i18n "Next" }}
                            <span>: {{.LinkTitle}}</span>
                            <img src="/images/docs/v3.3/next.svg" alt="{{ i18n " Next" }}">
                        </a>
                        <!-- {{ end }} -->
                        {{ end }}
                    </div>
                    {{ end }}
                    <div></div>
                </div>
                {{ if .IsPage }}
                <div class="aside">
                    <div class="inner-div">
                        <div class='title'>
                            {{ i18n "What’s on this Page" }}
                        </div>
                        <div class='tabs'>
                            {{ .TableOfContents }}
                        </div>
                    </div>
                </div>
                {{ end }}
            </div>
        </section>
        {{ $aside := resources.Get "js/aside.js" }}
        {{ $asideJS := $aside | resources.Fingerprint "sha512" }}
        <script type="text/javascript" src="{{ $asideJS.RelPermalink }}"
            integrity="{{ $asideJS.Data.Integrity }}"></script>

        {{ $tab := resources.Get "js/markdown-tab.js" }}
        {{ $tabJS := $tab | resources.Fingerprint "sha512" }}
        <script type="text/javascript" src="{{ $tabJS.RelPermalink }}" integrity="{{ $tabJS.Data.Integrity }}"></script>

        <script>
            var languageCode = '{{.Site.Language.Lang}}'
            var filePath = '{{ .File.Path }}'
            var githubUrl = '{{ .Site.Params.githubUrl }}'
            // var filePath = 'README.md'
            var Yes = $('button.Yes');
            var No = $('button.No');
            var msg = $('p.msg-thank')
            msg.hide()

            Yes.click(function () {
                Yes.css("background-color", " #55BC8A");
                Yes.css("opacity", '0.5');
                Yes.css("pointer-events", "none");
                No.css("pointer-events", "none");
                msg.show()
            })

            No.click(function () {
                No.css("background-color", " #55BC8A");
                No.css("opacity", '0.5');
                Yes.css("pointer-events", "none");
                No.css("pointer-events", "none");
                msg.show()
            })

            var getLatestTime = function (data) {
                var commit = data[0].commit
                return commit.author.date.replace("T", " ").replace("Z", "")
            }

            var filterData = function (data) {
                var arr = []
                var length = data.length
                for (var i = 0; i < length; i++) {
                    var author = data[i].author
                    if (author) {
                        var avatar_url = author.avatar_url
                        if (avatar_url && !arr.includes(avatar_url)) {
                            arr.push(avatar_url)
                        }
                    }

                }
                return arr
            }
            var getFileContributors = function () {
                var url = 'https://api.github.com/repos/kubesphere/website/commits?path=content/' + languageCode + '/' + filePath
                $.getJSON(url, function (data) {
                    if (!data || data.length === 0) {
                        $('.contributor-div').hide()
                        return
                    }
                    var newData = filterData(data)
                    var time = getLatestTime(data)
                    renderLatestTime(time)
                    renderContributors(newData)
                })
            }
            var renderContributors = function (data) {
                var contributor = $('.contributor-avatar')
                var length = data.length
                var len = 5
                $.each(data.slice(0, len), function (index, item) {
                    var img = $("<img />", {
                        "src": item,
                        "alt": "avatar"
                    })
                    $("<li />", {
                        "html": img
                    }).appendTo(contributor);
                });
                var t = length - len
                if (t > 0) {
                    $('.more-contributor').html('+' + t)
                }
            }

            var renderLatestTime = function (time) {
                $('.update-time').html(time)
            }

            var bindClickMenu = function () {
                var sectionMenu = $(".section-menu")
                $('.section-control').on('mouseenter', function (e) {
                    if (sectionMenu.is(":hidden")) {
                        sectionMenu.show();
                    }
                })

                sectionMenu.on('mouseleave', function () {
                    sectionMenu.hide();
                })

                $(document).on("click", function () {
                    sectionMenu.hide()
                });

                sectionMenu.on("click", function (e) {
                    e.stopPropagation();
                })
            }

            var bindClickSecondMenu = function () {
                var sectionMenu = $(".section-2 .left-div")
                $('.second-section-menu').on('click', function (e) {
                    sectionMenu.css("left", "0")

                    $(document).one("click", function () {
                        sectionMenu.css("left", "-274px")
                    });

                    e.stopPropagation()
                })

                sectionMenu.on("click", function (e) {
                    e.stopPropagation();
                })
            }

            var useViewer = function () {
                var viewer = new Viewer(document.querySelector('.md-body'), {
                    url: 'src'
                })
            }

            var __main = function () {
                getFileContributors()
                bindClickMenu()
                bindClickSecondMenu()
                useViewer()
            }

            __main()

            $(".asciicast").children().attr( "title", "video" );

        </script>
    </main>

    <footer>
        <div class="down-main">
            <div class='img-div'>
                <a class='wechat' href="javascript:void(0);" aria-label="wechat">
                    {{ "/static/images/footer/wechat.svg" | readFile | safeHTML }}
                    <div class="hide-div">
                        <p>Follow the official account</p>
                        <img src="/images/footer/wechat_code.svg" alt="">
                    </div>
                </a>
                <a class='facebook-a' href="https://www.facebook.com/kubesphere" target="_blank" aria-label="facebook"></a>
                <a class='twitter-a' href="{{ .Site.Params.twitterLink }}" target="_blank" aria-label="twitter"
                    rel="noopener noreferrer"></a>
                <a class='linkedin-a' href="{{ .Site.Params.linkedinLink }}" target="_blank" aria-label="linkedin"
                    rel="noopener noreferrer"></a>
                <a class='youtube-a' href="{{ .Site.Params.youtubeLink }}" target="_blank" aria-label="youtube"
                    rel="noopener noreferrer"></a>
                <a class='slack-a' href="{{ .Site.Params.slackLink }}" target="_blank" aria-label="slack" rel="noopener noreferrer"></a>
                <a class='github-a' href="{{ .Site.Params.githubLink }}" target="_blank" aria-label="github" rel="noopener noreferrer"></a>
                <a class='medium-a' href="{{ .Site.Params.mediumLink }}" target="_blank" aria-label="medium" rel="noopener noreferrer"></a>
            </div>
            <p class='p1'>{{ i18n "KubeSphere®️ 2023 All Rights Reserved." }}</p>
        </div>
    </footer>
</body>

</html>